<nz-layout>
    <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzWidth]="width" [nzTrigger]="triggerTemplate">
        <div class="logo">
            <div class="logoText just-center" *ngIf="!isCollapsed">{{globalTitle}}</div>
            <div class="logo-img" *ngIf="isCollapsed" [title]="globalTitle">
              <!--装备分院的时候注释掉-->
                <!--<img [src]="loginImage" alt="">-->
            </div>
        </div>
        <ul class="nav" nz-menu [nzMode]="'inline'" [nzTheme]="'dark'" [nzInlineCollapsed]="isCollapsed">
            <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: subMenuList }"></ng-container>
            <ng-template #menuTpl let-subMenuList>
                <ng-container *ngFor="let item of subMenuList;let i = index;">
                    <li
                            nz-menu-item
                            [nzPaddingLeft]="item.level * 12"
                            *ngIf="!item.children.length"
                            (click)="goToDetailMenu(item,1)"
                            [nzSelected]="item.checkStatus"
                            nz-tooltip
                            nzPlacement="right"
                            [nzTitle]="isCollapsed ? item.title : ''"
                    >
            <span title>
              <i class="{{item.icon}}" style="margin-right:13px;width: 18px"></i>
              <span class="hidden-over">{{ item.title }}</span>
            </span>
                    </li>
                    <li
                            nz-submenu
                            [nzOpen]="item.disabled"
                            (nzOpenChange)="openHandler(i,item.level)"
                            [nzPaddingLeft]="item.level * 12"
                            *ngIf="item.children.length"
                            nz-tooltip
                            nzPlacement="right"
                            [nzTitle]="isCollapsed ? item.title : ''"
                    >
            <span title>
              <i class="{{item.icon}}" style="margin-right:13px;width: 18px"></i>
              <span class="hidden-over">{{ item.title }}</span>
            </span>
                        <ul>
                            <ng-container
                                    *ngTemplateOutlet="menuTpl; context: { $implicit: item.children }"></ng-container>
                        </ul>
                    </li>
                </ng-container>
            </ng-template>
        </ul>
    </nz-sider>
    <nz-layout>
        <nz-header>
            <i
                    class="trigger"
                    nz-icon
                    [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
                    (click)="isCollapsed = !isCollapsed"
                    title="收缩菜单"
            ></i>
            <nz-dropdown [nzTrigger]="'hover'">
                <div nz-dropdown class="outsys">
                    <ul class="iconUl">
                        <li title="{{user?.realName}}">
                            <img class="imgSpan" [src]="imgUrl" alt="">
                            {{user?.realName}}
                        </li>
                        <li>
                            <a><i class="fa fa-caret-down" style="color: #fff"></i></a>
                        </li>
                    </ul>
                </div>
                <ul nz-menu>
                    <li nz-menu-item (click)="personalClick()">个人中心</li>
                    <li nz-menu-item>帮助文档</li>
                    <li nz-menu-item (click)="loginOut()">退出系统</li>
                </ul>
            </nz-dropdown>
            <nz-dropdown [(nzVisible)]="showKey" [nzTrigger]="'click'" [nzClickHide]="false"
                         [nzPlacement]="'bottomCenter'"
                         style="float: right;margin-right: 20px;cursor: pointer;">
                <div nz-dropdown class="dropdiv">
                    <img src="assets/msgs.png" alt="" (click)="getListUnread()">
                    <span class="dot" *ngIf="readState"></span>
                </div>
                <div class="msgbox">
                    <div class="msgboxhead">
                        <span class="headleft">你有<span style="color: #1E9FFF;">{{totalInfos}}</span>条未读消息</span>
                        <span class="headright" *ngIf="unReadList.length > 0" (click)="allHasRead()">全部已读</span>
                    </div>
                    <div class="msgboxcontent" *ngIf="unReadList.length > 0">
                        <ul>
                            <li *ngFor="let item of unReadList;let i = index">
                                <img *ngIf="item.messType === 1 && item.grade === 0" src="assets/img/newsType/level1.png"
                                     class="imgcont" alt="">
                                <img *ngIf="item.messType === 1 && item.grade === 1" src="assets/img/newsType/level2.png"
                                     class="imgcont" alt="">
                                <img *ngIf="item.messType === 1 && item.grade === 2" src="assets/img/newsType/level3.png"
                                     class="imgcont" alt="">
                                <img *ngIf="item.messType === 2 && item.grade === 0" src="assets/img/newsType/shenpi1.png" class="imgcont"
                                     alt="">
                              <img *ngIf="item.messType === 2 && item.grade === 1" src="assets/img/newsType/shenpi2.png" class="imgcont"
                                   alt="">
                              <img *ngIf="item.messType === 2 && item.grade === 2" src="assets/img/newsType/shenpi3.png" class="imgcont"
                                   alt="">
                                <img *ngIf="item.messType === 3 && item.grade === 0" src="assets/img/newsType/shezhi1.png" class="imgcont"
                                     alt="">
                              <img *ngIf="item.messType === 3 && item.grade === 1" src="assets/img/newsType/shezhi2.png" class="imgcont"
                                   alt="">
                              <img *ngIf="item.messType === 3 && item.grade === 2" src="assets/img/newsType/shezhi3.png" class="imgcont"
                                   alt="">
                                <div class="msgdiv" (click)="showInfoFn(item)">
                                    <p class="msgdiv_type">{{item.title}}</p>
                                    <span class="msgdiv_cont" [innerHTML]="item.content |html"></span>
                                    <span style="color: #0ed4fe;cursor: pointer" *ngIf="item.redirectUrl"
                                          (click)="clickJump(item)">

                                      <span *ngIf="item.redirectUrl=== 'tch_safety_exam'">查看考试</span>
                          <span *ngIf="item.redirectUrl=== 'tch_safety_learn_task'">查看任务</span>
                                      <span *ngIf="item.redirectUrl=== 'tch_classroom_learn_task'">查看任务</span>
                          <span *ngIf="item.redirectUrl=== 'tch_ask_leave_approve'">前往审批</span>
                          <span *ngIf="item.redirectUrl=== 'tch_ask_leave_view'">查看请假</span>
                          <span *ngIf="item.redirectUrl=== 'personal_subscribe_view'">查看预约</span>
                          <span *ngIf="item.redirectUrl=== 'team_subscribe_view'">查看预约</span>
                          <span *ngIf="item.redirectUrl=== 'tch_repeal_approve'">前往审批</span>
                          <span *ngIf="item.redirectUrl=== 'tch_subscribe_approve'">前往审批</span>
                          <span *ngIf="item.redirectUrl=== 'tch_break_promise_personal_view'">前往查看</span>
                          <span *ngIf="item.redirectUrl=== 'tch_break_promise_team_view'">前往查看</span>
                                       <span *ngIf="item.redirectUrl=== 'stu_break_promise_personal_view'">前往查看</span>
                          <span *ngIf="item.redirectUrl=== 'stu_break_promise_team_view'">前往查看</span>
            <i nz-icon nzType="double-right" nzTheme="outline"></i>
            </span>
                                    <p class="msgdiv_time">{{item.gmtCreate ? (item.gmtCreate| date:'yyyy-MM-dd HH:mm:ss') : '-'}}</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                  <div class="msgboxcontent" style="font-size: 14px;text-align: center" *ngIf="unReadList.length <= 0">暂无未读消息</div>
                  <div class="msgboxfoot" (click)="toAllInfo()"><span>全部消息</span></div>
                </div>
            </nz-dropdown>
        </nz-header>
        <nz-content>
            <div class="navInfo-top">
                <div class="navDirective">
                    <div class="left-d">
                        <span class="angleLeft" (click)="clickLeft()"><i class="fa fa-angle-double-left"></i></span>
                        <span class="angleLeft" title="首页" (click)="homeClick()"><i class="fa fa-home"></i></span>
                    </div>
                    <div class="navInfo" [hidden]="!navList || navList.length === 0">
                        <div class="infoCover">
                            <nz-tag nzMode="closeable"
                                    *ngFor="let item of titles;let i=index"
                                    (nzOnClose)="closeNav(item.url,i)"
                                    (click)="navUrl(item)"
                                    style="height: 36px;top: 0;line-height: 36px;"
                                    [nzChecked]="item.checkStatus"
                            >{{item.name}}
                            </nz-tag>
                        </div>
                    </div>
                    <div class="right-d">
                        <span class="angleRight" (click)="clickRight()"><i class="fa fa-angle-double-right"></i></span>
                        <span class="angleRight">
                 <nz-dropdown [nzTrigger]="'hover'">
                  <a nz-dropdown><i class="fa fa-angle-down" style="color: #a09797"></i></a>
                  <ul nz-menu>
                    <li nz-menu-item (click)="closeNavMenu(1)">关闭当前标签页</li>
                    <li nz-menu-item (click)="closeNavMenu(2)">关闭其他标签页</li>
                    <li nz-menu-item (click)="closeNavMenu(3)">关闭全部标签页</li>
                  </ul>
                </nz-dropdown>
            </span>
                    </div>
                </div>
            </div>
            <div class="routDiv">
                <div class="routInner">
                    <router-outlet></router-outlet>
                    <div class="massage"></div>
                </div>
            </div>
        </nz-content>
    </nz-layout>
</nz-layout>
<!--全局提示消息-->
<nz-modal
        [(nzVisible)]="isShowGlobalInfo"
        [nzTitle]="null"
        [nzContent]="infoContent"
        [nzBodyStyle]="{
        padding:'0px'
        }"
        [nzFooter]="infoFooter"
        [nzClosable]="false"
        (nzOnCancel)="isShowGlobalInfo = false"
        nzMaskClosable="false"
        nzWidth="580"
>
    <ng-template #infoContent class="ant-modal-body ng-star-inserted1">
        <div class="modal-hei over-y" style="height: 300px">
            <div class="top-img"></div>
            <div class="text-content">
                <div style="text-align: left;font-size: initial">[{{alertInfoContent?.gmtCreate |date:'yyyy年MM月dd日' }}]
                </div>
                <div style="text-align: initial;color: darkgrey" [innerHTML]="alertInfoContent?.content"></div>
            </div>
        </div>
    </ng-template>

    <ng-template #infoFooter>
        <div class="w100" style="height: 50px;line-height: 50px;text-align: center">
            <span style="color: #4bc2ff;font-size: 18px;cursor: pointer" (click)="hasKnown()">知道了</span>
        </div>

    </ng-template>
</nz-modal>
<!--查看消息-->
<nz-modal
        [(nzVisible)]="isShowDetail"
        [nzTitle]="assignTitle"
        [nzContent]="assignContent"
        [nzFooter]="assignFooter"
        (nzOnCancel)="closeFn()"
        style="z-index: 999"
        nzMaskClosable="false"
        nzWidth="580"
>
    <ng-template #assignTitle>
        <span style="font-size: 14px;">{{lookNews.title}}</span>
    </ng-template>
    <ng-template #assignContent>
        <div class="modal-hei over-y">
            <p style="overflow: hidden;">
                <span style="float:left;">发布人：{{lookNews ? lookNews.senderName : ''}}</span>
                <span style="float: right;">{{lookNews ? (lookNews.gmtCreate| date:'yyyy-MM-dd HH:mm:ss') : '-'}}</span>
            </p>
            <div class="assignContent" [innerHTML]="lookNews.content |html"></div>
        </div>
    </ng-template>

    <ng-template #assignFooter>
        <button nz-button nzType="default" (click)="closeFn()">关闭</button>
    </ng-template>
</nz-modal>
